<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select name="" id="f1">
    <option value="0">--请选择--</option>
    <option value="1">江苏</option>
    <option value="2">北京</option>
</select>

<select name="" id="f2">
    
</select>

<script>
    /*
        思路：
            1、选择城市，获取数据
            2、创建option标签
            3、添加数据到option
            4、将option标签加到select标签中
            5、重新选择时，要清空之前添加的标签
     */
    var data = {1: ["徐州", "常州", "无锡"], 2: ["东城", "沙河"]}
    var f1Ele = document.getElementById("f1");
    f1Ele.onchange = function () {
        var area = data[f1Ele.value];
        var f2Ele = document.getElementById("f2");
        // 清空标签
        f2Ele.innerHTML="";
        for (var i = 0; i < area.length; i++){
            var optEle = document.createElement("option");
            optEle.innerText = area[i];
            f2Ele.appendChild(optEle);
        }
    }
</script>

</body>
</html>